<template>
    <view v-if="tbOrder">
        <div style="margin-top: 5px; margin-bottom: 10px; background-color: #FFFFFF;" v-if="tbOrder.tbOrderGoodsList.length">
            <div>
                <div class="table">
                    <div class="tr">
                        <div class="td">
                            <label>
                                <image src="/pages/sub/sub1-tabs/static/icon/shop.png" class="store-brand"></image>{{tbOrder.tbStore.name}}&nbsp;
                                <u-icon name="arrow-right"/>
                            </label>
                            <u-button type="warning" size="mini" v-if="tbOrder.tbStore.validCouponCount" @click="showCouponList()">点击领取优惠券</u-button>
                        </div>
                    </div>
                </div>
            </div>
            <div style="background-color: #FFFFFF; padding-bottom: 2px;">
                <view class="goods-list" style="display: flex; margin-bottom: 6px;"
                      v-for="(tbOrderGoods, index2) in tbOrder.tbOrderGoodsList" :key="tbOrderGoods.id">
                    <view>
                        <image style="height: 100px; width: 100px; padding-top: 15px;"
                               :src="tbOrderGoods.image ? tbOrderGoods.image + '?imageView2/1/w/300/h/300' : '/pages/sub/sub1-tabs/static/default-image/goods.jpg'"
                               mode="aspectFill"></image>
                    </view>
                    <view style="padding: 6px 5px 5px 10px; width: 100%;">
                        <view style="min-height: 82px; overflow: hidden;">
                            <div style="font-size: 14px;">
                                {{tbOrderGoods.title}}
                            </div>
                            <div style="padding-top: 2px; padding-bottom: 2px;">
                                <u-tag :text="'规格：' + tbOrderGoods.specName" mode="plain" size="mini" style="margin-right: 5px;"/>
                                <u-tag v-if="tbOrderGoods.colorId" :text="'颜色：' + tbOrderGoods.colorName" mode="plain" size="mini"/>
                            </div>
                        </view>
                        <view style="display: flex; border-bottom: 1px solid #eeeeee; padding-bottom: 4px;"
                              :style="{'border-bottom': tbOrder.tbOrderGoodsList.length - 1 === index2 ? '0px' : '1px solid #eeeeee'}">

                        <view style="font-weight: bold; color: red; padding-top: 5px;">
                                ￥{{tbOrderGoods.price | toFixed2}}
                            </view>
                            <view style="width: 100%; text-align: right; padding-right: 5px;">
                                数量：{{tbOrderGoods.quantity}}&nbsp;&nbsp;小计：￥{{tbOrderGoods.price * tbOrderGoods.quantity | toFixed2}}
                                <div v-if="tbOrderGoods.promotionIf" style="text-align: right;" class="skin-font">
                                    {{tbOrderGoods.promotionIf}}
                                </div>
                            </view>
                        </view>
                    </view>
                </view>
            </div>
        </div>

        <div v-if="tbOrder.tbStore" style="text-align: right; padding: 0px 10px 10px 10px;">
            <div>订单合计：￥{{tbOrder.money | toFixed2}}</div>
            <div v-if="tbOrder.promotionIf" class="skin-font">{{tbOrder.promotionIf}}</div>
            <div v-if="tbOrder.reduceMoney" class="skin-font">促销活动减免：￥-{{tbOrder.reduceMoney | toFixed2}}</div>
            <div v-if="tbOrder.couponMoney" class="skin-font">优惠券减免：￥-{{tbOrder.couponMoney | toFixed2}}</div>
            <div>实付金额: ￥{{tbOrder.payMoney | toFixed2}}</div>
        </div>

        <div style="margin-bottom: 100px; padding: 10px; display: flex;">
            <div style="width: 80px; padding-top: 8px;">
                买家留言
            </div>
            <div style="width: 100%;">
                <u-input v-model="remark" :border="true" placeholder="选填：给商家留言（50字以内）"/>
            </div>
        </div>

        <div class="custom-bottom-bar" v-if="tbOrder.tbStore">
            <label style="width: 100%; padding-top: 8px; padding-right: 10px; text-align: right;">
                实付金额：<label style="color: red;">￥</label>
                <u-count-to :start-val="tbOrder.payMoney" :end-val="tbOrder.payMoney" :duration="500" :color="$u.color['error']" :decimals="2" :bold="true"
                            :use-easing="false" v-if="tbOrder.payMoney"></u-count-to>
            </label>
            <label style="padding-top: 5px; padding-right: 6px;">
                <u-button type="error" shape="circle" :custom-style="{width: '100px'}" @click="immediatelyPay()">立即支付</u-button>
            </label>
        </div>

        <tbStoreCouponSelect ref="tbStoreCouponSelectRef" @selectEmit="generatePrepareOrder"></tbStoreCouponSelect>
        <immediatelyPay ref="immediatelyPayRef"></immediatelyPay>
    </view>
</template>

<script>

    import tbStoreCouponSelect from '@/components/tb-store-coupon-select.vue'
    import immediatelyPay from '@/components/immediately-pay.vue'
    import {TbOrderService} from "@/dev/services/tb-order.service";
    import {CommonUtil} from "@/dev/core/utils/common.util";

    export default {
        data() {
            return {
                shoppingCartIds: null,
                tbOrder: null,
                remark: ''
            }
        },
        components: {
            tbStoreCouponSelect,
            immediatelyPay
        },
        onReady() {  // 支付页面不能用onShow()方法，因为手机支付回调时会重复触发该方法。
            this.shoppingCartIds = this.urlParams.shoppingCartIds;
            // 生成预支付订单
            this.generatePrepareOrder();
        },
        methods: {
            showCouponList() {
                this.$refs.tbStoreCouponSelectRef.openStoreCouponSelect(this.tbOrder.tbStore.id);
            },
            /**
             * 生成预支付订单
             */
            generatePrepareOrder() {
                const _self = this
                new TbOrderService().prepareTbOrder({shoppingCartIds: this.shoppingCartIds}).then(result => {
                    if (result.status === "success") {
                        if (result.tbOrder) {
                            _self.tbOrder = result.tbOrder
                        } else {
                            CommonUtil.alert({
                                title: '提示！',
                                content: '订单异常，请重新下单',
                                showCancel: true, // 是否显示取消按钮
                                success: function (res) {
                                    if (res.cancel) { // 点击取消,默认隐藏弹框
                                    } else { // 点击确定
                                        uni.navigateBack({
                                            delta: 1
                                        });
                                    }
                                }
                            });
                        }
                    } else {
                        CommonUtil.alert(result.message);
                    }
                })
            },
            /**
             * 立即支付
             */
            immediatelyPay() {
                const _self = this
                this.$refs.immediatelyPayRef.pay({
                    tbOrder: {
                        shoppingCartIds: this.shoppingCartIds,
                        remark: this.remark
                    },
                    callback: function (tbOrder, payResult) {
                        uni.redirectTo({
                            url: `/pages/sub/sub1-tabs/tabs/person/consumer-voucher/consumer-voucher-detail/index?id=${tbOrder.id}`
                        });
                    }
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    .store-brand {
        height: 18px;
        width: 18px;
        padding-left: 4px;
        padding-right: 2px;
        position: relative;
        top: 3px;
    }
</style>
